/*========== 展示菜单 ==========*/
const showMenu = (toggleId, navId) => {
  const toggle = document.querySelector(toggleId)
  const nav = document.querySelector(navId)

  if (toggle && nav) {
    toggle.addEventListener('click', () => {
      nav.classList.toggle('show-menu')
    })
  }
}

showMenu('#nav-toggle', '#nav-menu')

/*========== 点击链接 移除菜单 ==========*/
const navLink = document.querySelectorAll('.nav-link')

function linkAction() {
  const navMenu = document.querySelector('#nav-menu')
  navMenu.classList.remove('show-menu')
}

navLink.forEach(link => link.addEventListener('click', linkAction))

/*========== 滚动模块 点击链接 ==========*/
const sections = document.querySelectorAll('section[id]')

function scrollActive() {
  const scrollY = window.pageYOffset

  sections.forEach(current => {
    const sectionHeight = current.offsetHeight
    const sectionTop = current.offsetTop - 50;
    sectionId = current.getAttribute('id')

    if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
      document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.add('active-link')
    } else {
      document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.remove('active-link')
    }
  })
}
window.addEventListener('scroll', scrollActive)

/*========== 改变头部背景色 ==========*/
function scrollHeader() {
  const nav = document.getElementById('header')
  if (this.scrollY >= 200) {
    nav.classList.add('scroll-header')
  } else {
    nav.classList.remove('scroll-header')
  }
}
window.addEventListener('scroll', scrollHeader)

/*========== 展示返回顶部 ==========*/
function scrollTop() {
  const scrollTop = document.getElementById('scroll-top')
  if (this.scrollY >= 560) {
    scrollTop.classList.add('show-scroll')
  } else {
    scrollTop.classList.remove('show-scroll')
  }
}
window.addEventListener('scroll', scrollTop)


/*========== 主题切换 ==========*/
const themeButton = document.getElementById('theme-button')
const darkTheme = 'dark-theme'
const iconTheme = 'bx-sun'

const selectedTheme = localStorage.getItem('selected-theme')
const selectedIcon = localStorage.getItem('selected-icon')

const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light'
// 取相反图标
const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'bx-moon' : 'bx-sun'

if (selectedTheme) {
  // dark时, 主题为暗黑
  document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme)
  // bx-moon 时  添加bx-sun
  themeButton.classList[selectedIcon === 'bx-moon' ? 'add' : 'remove'](iconTheme)
}

themeButton.addEventListener('click', () => {
  document.body.classList.toggle(darkTheme)
  themeButton.classList.toggle(iconTheme)
  localStorage.setItem('selected-theme', getCurrentTheme())
  localStorage.setItem('selected-icon', getCurrentIcon())
})


/*========== 滚动动画 滚动显示 ==========*/
const sr = ScrollReveal({
  // 起始方向
  origin: 'top',
  // 距离多远
  distance: '30px',
  // 持续时间
  duration: 2000,
  // 重置
  reset: true
})

sr.reveal(`.home-data, .home-img,
            .about-data, .about-img,
            .services-content, .menu-content,
            .app-data, .app-img,
            .contact-data, .contact-button,
            .footer-content`, {
  interval: 300
})
